<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello World</title>
    <!-- 引入React库 -->
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
  </head>
  <body>
    <button id="btn">我是按钮</button>
    <div id="root"></div>
    <script>
      // 创建一个React元素
      const button = React.createElement(
        "button",
        {
          type: "button",
          className: "hello",
          onClick: () => {
            alert("hello world");
          }
        },
        "Click me"
      );

      // 创建一个div
      const div = React.createElement("div", {}, "Hello World", button);

      // 获取根元素
      const root = ReactDOM.createRoot(document.getElementById("root"));

      // 渲染React元素到根元素
      root.render(div);

      // 获取按钮元素
      const btn = document.getElementById("btn");
      btn.addEventListener("click", () => {
        const button = React.createElement(
          "button",
          {
            type: "button",
            className: "hello",
            onClick: () => {
              alert("hello world");
            }
          },
          "Click"
        );
        // 创建一个div
        const div = React.createElement("div", {}, "Hello World", button);
        // 修改React元素后，必须重新对跟元素进行渲染
        root.render(div);
      });
    </script>
  </body>
</html>
